<template>
  <view class="gift-list">
    <up-navbar title="礼物">
      <template #left>
        <view></view>
      </template>
    </up-navbar>
    <view class="fixed-header"></view>

    <view v-for="gift in gifts" :key="gift.id" class="gift-card" @click="toggleDetail(gift)">
      <image :src="gift.imageUrl" mode="aspectFill" class="gift-image"></image>

      <text class="gift-name">{{ gift.name }}</text>
      <text class="gift-point">所需积分：{{ gift.point }}</text>

      <!-- 展开详情 -->
      <view v-if="gift.showDetail" class="detail-section">
        <text class="gift-description">描述：{{ gift.description }}</text>
        <u-button type="primary" class="exchange-btn" @click.stop="onExchange(gift)">立即兑换</u-button>
      </view>
    </view>
  </view>
</template>


<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getGiftPage } from '../../http/gift'

const gifts = ref<any[]>([])

onMounted(async () => {
  const res = await getGiftPage()
  gifts.value = res.records.map(g => ({ ...g, showDetail: false }))
})
console.log('res')

const toggleDetail = (gift: any) => {
  gift.showDetail = !gift.showDetail
}
const onExchange = (gift: any) => {
  uni.setStorageSync('currentGift', gift) // ✅ 存储完整 gift 对象
  uni.navigateTo({
    url: `/pages/gift/exchange-confirm?giftId=${gift.id}`
  })
}
</script>

<style scoped>
.gift-list {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  padding: 20rpx;
  background-color: #f9f9f9;
}

.gift-card {
  width: 100%; /* 改为 100% 占据整行 */
  margin-bottom: 30rpx; /* 卡片之间的垂直间距 */
  background: #fff;
  border-radius: 20rpx;
  box-shadow: 0 6rpx 20rpx rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  padding-bottom: 20rpx;
}

.gift-card:hover {
  transform: translateY(-6rpx);
  box-shadow: 0 10rpx 24rpx rgba(0, 0, 0, 0.12);
}

.gift-image {
  width: 100%;
  height: 200rpx; /* 可视情况调整高度 */
  border-radius: 20rpx 20rpx 0 0;
  object-fit: cover;
}

.gift-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  padding: 0 20rpx;
  display: block;
  margin-top: 12rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gift-point {
  font-size: 24rpx;
  color: #ff9900;
  padding: 0 20rpx;
  display: block;
  margin-top: 8rpx;
}

.detail-section {
  padding: 20rpx 20rpx 0;
  animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.gift-description {
  font-size: 24rpx;
  color: #666;
  line-height: 1.6;
  max-height: 80rpx;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.exchange-btn {
  margin-top: 20rpx;
  background: linear-gradient(to right, #ff7d00, #ffac33);
  color: #fff;
  font-size: 26rpx;
  font-weight: bold;
  border-radius: 40rpx;
  box-shadow: 0 4rpx 12rpx rgba(255, 125, 0, 0.2);
}

.fixed-header {
   position: sticky;
   top: 0;
   height: 44px; /* up-navbar 高度 */
   z-index: 999;
   background-color: transparent;
 }


</style>

